<!DOCTYPE html>
<html>
    <head>
        <title>点击弹出层以外的地方隐藏层 by 司徒正美</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            .menu_wrap{
                display: none;
                padding:5px;
                width:120px;
                border:1px solid #006dcc;
            }
            .menu{
                list-style: none;
                padding:0;
                margin:0;
            }

            .menu li{
                width:120px;
                text-indent: 1em;
                height: 25px;
                line-height: 25px;
            }
            .menu li:hover{
                background: #06a3d6;
                color:#fff;
            }
        </style>
        <script type="xxxxxx">
            /*  window.onload = function(){
                function log(s){
                    window.console && console.log(s);
                } 
                var get = function(i) {
                    return document.getElementById( i );
                }
                function addEvent(el, type, callback, useCapture  ){
                    if(el.dispatchEvent){//w3c方式优先
                        el.addEventListener( type, callback, !!useCapture  );
                    }else {
                        el.attachEvent( "on"+type, callback );
                    }
                    return callback;//返回callback方便卸载时用
                }
                addEvent(get("button"),"click",function(){
                    get("menu_wrap").style.display = "block";
                })
                var flag
                addEvent(get("menu_wrap"),"mouseenter",function(){
                    flag = false;
                })
                addEvent(get("menu_wrap"),"mouseleave",function(){
                    flag = true;
                })
                addEvent(document,"click",function(){
                    if(flag){

                        get("menu_wrap").style.display = "none";
                    }
                })
            }*/
        </script>
        <script src="mass.js" ></script>
        <script>
            $.require("ready,event,css",function(){
                var flag
                $("#button").click(function(){
                    flag = false;
                    $("#menu_wrap").show()
                })
             
                $("#menu_wrap").mouseleave(function(){
                    $.log("mouseleave")
                    flag = true;
                });
                $("#menu_wrap").mouseenter(function(){
                    $.log("mouseenter")
                    flag = false;
                })
                $(document).click(function(){
                    $.log(flag)
                    if(flag){
                        $("#menu_wrap").hide()
                        //  flag = false;
                    }
                })
            })
        </script>
    </head>
    <body>

        <div><strong id="button">显示下拉菜单 </strong></div>
        <div class="menu_wrap" id="menu_wrap">
            <ul class="menu">
                <li>item1</li>
                <li>item2</li>
                <li>item3</li>
            </ul>
        </div>

    </body>
</html>
